<template>
	<view>
		<view class="detail-title">
			<view class="detail-title-text" :class="orderStatus>0?'detail-title-text1':''">
				付款 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>1?'detail-title-text1':''">
				接单<i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>3?'detail-title-text1':''">
				出发 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>4?'detail-title-text1':''">
				到达 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>5?'detail-title-text1':''">
				服务 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>6?'detail-title-text1':''">
				完成
			</view>
			<view class="detail-title-text-1" v-if="orderStatus>=3&&orderInfo.daren_distance">
				相距{{orderInfo.daren_distance}}km
			</view>
		</view>
		<!-- #ifndef APP -->
		<view v-if="orderStatus>=3" class="map_con">
			<map class="map" ref="map" id="map" :markers="[{id:1,width: 22,
					height: 22,latitude:orderInfo.daren_lat,longitude:orderInfo.daren_lng,iconPath:'/static/start.png'},{id:2,width: 22,
					height: 22,latitude:orderInfo.lat,longitude:orderInfo.lng,iconPath:'/static/end.png'}]"
				:longitude="orderInfo.daren_lng" :latitude="orderInfo.daren_lat" scale="11"></map>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<view v-if="orderStatus>=3" class="map_con">
			<amap :lng="Number(orderInfo.daren_lng)" :lat="Number(orderInfo.daren_lat)" :idname="'amap'" :markers="[{id:1,width: 22,
					height: 22,lat:orderInfo.daren_lat,lng:orderInfo.daren_lng,icon:'static/start.png'},{id:2,width: 22,
					height: 22,lat:orderInfo.lat,lng:orderInfo.lng,icon:'static/end.png'}]"></amap>
		</view>
		<!-- #endif -->
		<view class="detail-con1" :style="orderStatus==4?'margin-top: -40rpx;z-index: 1;position: relative;':''">
			<view class="detail-con1-1">
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/order-icon-0.svg" mode=""></image>
					<span>{{orderInfo.title}}</span>
				</view>
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/biao.svg" mode=""></image>
					<span>{{orderInfo.time_text}}</span>
				</view>
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode=""></image>
					<span>{{orderInfo.address}}</span>
				</view>
				<view class="con1-item" v-if="orderInfo.type == 0">
					<image src="https://pw.qyang.cc/static/svg/order-icon-3.svg" mode=""></image>
					<span>{{orderInfo.level_title}}</span>
				</view>
				<!-- <view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/order-icon-3.svg" mode=""></image> 不指定区域
				</view> -->
			</view>
			<view class="detail-con1-2">
				{{orderInfo.notes?orderInfo.notes:'无'}}
			</view>
		</view>

		<view class="detail-con2">
			<view class="detail-con2-item" @click="goPage('/subpages/talent/talent?id='+orderInfo.daren_id)">
				<view>达人</view>
				<view class="detail-con2-right">
					<image class="image" :src="orderInfo.daren_avatar" mode="aspectFill"></image>
					{{orderInfo.daren_nickname}}
					<i class="iconfont icon">&#xe604;</i>
				</view>
			</view>
		</view>

		<view class="detail-con2" v-if="orderInfo.status>=6" @click="showLog">
			<view class="detail-con2-item">
				<view>核销完成记录</view>
				<view class="detail-con2-right">
					查看
					<i class="iconfont icon">&#xe604;</i>
				</view>
			</view>
		</view>

		<view class="detail-con2">
			<view class="detail-con2-item">
				<view>服务费</view>
				<view>￥{{orderInfo.price}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人路费</view>
				<view>￥{{orderInfo.address_price}}</view>
			</view>
			<view class="detail-con2-item">
				<view>优惠券</view>
				<view>-￥{{orderInfo.pre_price}}</view>
			</view>
			<view class="detail-con2-item">
				<view>合计</view>
				<view>￥{{orderInfo.total_price}}</view>
			</view>
		</view>
		<view class="detail-con2">
			<view class="detail-con2-item">
				<view>订单编号</view>
				<view>{{orderInfo.order_no}}</view>
			</view>
			<view class="detail-con2-item">
				<view>下单时间</view>
				<view>{{orderInfo.createDate}}</view>
			</view>
			<view class="detail-con2-item">
				<view>支付时间</view>
				<view>{{orderInfo.createDate}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人选择</view>
				<view>{{orderInfo.status2Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人出发</view>
				<view>{{orderInfo.status3Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人到达</view>
				<view>{{orderInfo.status4Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>订单核销</view>
				<view>{{orderInfo.status5Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>订单完成</view>
				<view>{{orderInfo.status6Date}}</view>
			</view>
		</view>
		<u-popup :show="isShowLog" :round="10" mode="bottom" closeable @close="isShowLog=false"
			@open="isShowLog=true">
			<view class="pop-content-detail">
				<view class="content-title">
					核销记录
				</view>
				<view class="content-detail">
					<writeoffrecords :orderId="orderInfo.id"></writeoffrecords>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "orderDetailTalent",
		props: {
			orderId: {
				type: [Number, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
				required: true, // 可以根据实际需求设置是否为必传属性
			},
			orderInfo: {
				type: [Object, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
				required: true, // 可以根据实际需求设置是否为必传属性
				default: {}
			},
			orderStatus: {
				type: [Number, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
				required: true, // 可以根据实际需求设置是否为必传属性
			}
		},
		data() {
			return {
				markers: [],
				isShowLog:false
			};
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			showLog(){
				this.isShowLog = true
			},
		}
	}
</script>

<style lang="scss">
	.detail-con1 {
		width: 345px;
		opacity: 1;
		background: #FFFFFF;
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 12px;
		letter-spacing: 0px;
		color: #333333;
		margin: 20rpx auto;
		padding: 20rpx;
		position: relative;
		z-index: 1;

		.detail-con1-1 {
			width: 315px;
			border-radius: 8px;
			opacity: 1;
			background: #FFF6F9;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 12px;
			letter-spacing: 0px;
			color: #333333;
			padding: 20rpx;
			margin: 20rpx auto;

			image {
				width: 12px;
				height: 12px;
				margin-right: 20rpx;
			}

			.con1-item {
				height: 40rpx;

				display: flex;
				align-items: center;

				span {

					width: 600rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
					/* 使用省略号表示被截断的文本 */
				}
			}

		}

		.detail-con1-2 {
			width: 315px;
			line-height: 40rpx;
			border-radius: 8px;
			opacity: 1;
			background: rgba(255, 224, 164, 0.25);
			padding: 20rpx;
			margin: 20rpx auto;
		}
	}

	.detail-con2 {
		width: 345px;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 28px;
		letter-spacing: 0px;
		color: #212121;
		margin: 20rpx auto;
		padding: 20rpx;

		.detail-con2-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 5rpx 10rpx;

			.detail-con2-right {
				display: flex;
				align-items: center;
				font-family: 阿里巴巴普惠体;
				font-size: 13px;
				font-weight: normal;
				line-height: 28px;
				letter-spacing: 0px;
				color: #666666;

				.image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}

				.icon {
					font-style: normal;
				}
			}
		}


	}

	.detail-title {
		width: 100%;
		height: 88rpx;
		opacity: 1;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;

		.detail-title-text-1 {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 28rpx;
			margin-left: auto;
			color: #333333;
			// margin: 0 20rpx;
		}

		.detail-title-text1 {
			color: #FF7681 !important;
		}

		.detail-title-text {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 28rpx;
			color: #999999;
			display: flex;
			align-items: center;

			.icon {
				font-style: normal;
				// margin: 0 10rpx;
			}
		}
	}
	.map {
		width: 750rpx;
		height: 464rpx;
		margin-bottom: -67rpx;
	}
</style>